/**
 * ChatContainer - 聊天主容器组件
 * 负责组合消息列表和输入框，构成完整的聊天界面
 */
import React, { useRef, useEffect } from 'react';
import { useChatContext } from '../ctx/ChatContext';
import ChatMessages from './ChatMessages';
import ChatInput from './ChatInput';
import EmptyState from './EmptyState';

const ChatContainer: React.FC = () => {
    const { currentConversation, isLoading, sendMessage } = useChatContext();
    const messagesEndRef = useRef<HTMLDivElement>(null);

    // 消息列表滚动到底部
    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };

    // 当消息更新时滚动到底部
    useEffect(() => {
        scrollToBottom();
    }, [currentConversation?.messages]);

    return (
        <div className="flex flex-col h-full overflow-hidden">
            <div className="flex-1 overflow-y-auto px-4 pt-4 pb-2">
                {currentConversation && currentConversation.messages.length > 0 ? (
                    <ChatMessages messages={currentConversation.messages} />
                ) : (
                    <EmptyState />
                )}
                <div ref={messagesEndRef} />
            </div>

            <div className="p-4 bg-white/30 backdrop-blur-sm">
                <ChatInput onSendMessage={sendMessage} isLoading={isLoading} />
            </div>
        </div>
    );
};

export default ChatContainer;
